<template>
  <div class="container coupon">
    <!-- <van-nav-bar
      title="积分流水"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="coupon-list-row">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多数据了"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="getIntegralRecords"
        >
          <div class="flex coupon-list align-center" v-for="(item,index) in couponList" :key="index">
            <div class="flex-1 integral">
              <span v-if="item.Type == 0" style="color:#07c160;">+{{item.Integral}}</span>
              <span v-else style="color:#f40">-{{item.Integral}}</span>
            </div>
            <div style="width:50%;">
              <!-- <div>{{item.TypeStr}}</div> -->
              <div style="font-size:12px;color:#999;text-align:right;">{{item.OperatingTime}}</div>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
//import { msToDate } from '@/until/until';
export default {
  name: 'integral',
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      error: false,
      couponList:[],
      userId:'',
      pageIndex:0,
      pageSize:20
    };
  },
  mounted() {
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.userId = userInfo.Id;
    //this.getIntegralRecords();
  },
  methods: {
     onClickLeft() {
      this.$router.go(-1);
    },
    onRefresh() {
      setTimeout(() => {
        this.pageIndex = 0;
        this.getIntegralRecords();
        this.$toast('刷新成功');
        this.isLoading = false;
        this.finished = false;
      }, 500);
    },
    getIntegralRecords(){
      this.$api.mine.getIntegralRecords({   
          UserId:this.userId,    
          // UserId:1,    
          PageIndex: ++this.pageIndex,
          PageSize:this.pageSize   
      }).then(res=> {
        this.loading = false;
        let data = res.Data;
        if(data.PageIndex==1){
          this.couponList = data.Data;
        }else{
          this.couponList = this.couponList.concat(data.Data);
        }
        if (this.couponList.length >= data.TotalNum) {
          this.finished = true;
        }
      }).catch(() => {
        this.error = true;
      })   
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.coupon {
  height: auto;
  .coupon-list-row {
    padding: .266667rem;
    .coupon-list {
      margin-bottom: 4px;
      background-color: #fff;
      padding: .266667rem .533333rem;
      font-size: .373333rem;
      .coupon-name {
        font-size: .426667rem;
      }
      .integral{
        font-size: 18px;
        color: #666;
      }
      .text {
        font-size: .32rem;
        color: #999;
      }
      .coupon-money-row {
        color:#f44;
        font-size: .373333rem;
        .coupon-money {
          font-size: .64rem;
        }
      }
    }
  }
}
</style>